<template>
	<view class="u-page mt50">
		<u-text class="" size="30" text="易能付代理商版"></u-text>
		<u-form class="mt50" labelPosition="left" ref="form1">
			<u-input v-model="username" style="height:80upx;line-height:80upx;" fontSize="18" placeholder="请输入代理商账户名"
				:clearable="true" ref="input">
				<template slot="prefix">
					<text class="uicon-account u-iconfont LoginIcon"></text>
				</template>
			</u-input>
			<u-input class="mt20" style="height:80upx;line-height:80upx;" fontSize="18" v-model="keyword"
				:password="true" placeholder="请输入代理商登入密码" :clearable="true" prefixIcon="lock"
				prefixIconStyle="font-size:24px;color:#3c9cff;margin-right:20upx;" ref="input">
				<template slot="prefix">
					<text class="uicon-account u-iconfont LoginIcon LoginIconLock"></text>
				</template>
			</u-input>
		</u-form>
		<u-button class="mt20" type="primary" size="large" text="登录" @click="login"></u-button>
		<checkbox-group class="block" @change="CheckboxChange">
			<view class="bottom-c">
				<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"
					style="margin-right: 20rpx;"></checkbox>
				<text>我已阅读并同意</text>
				<text style="color: #0081FF; " @tap="go('/pages/my/page?id=23')">《商户协议》</text>
				<text style="color: #0081FF; " @tap="go('/pages/my/page?id=25')">《隐私协议》</text>
			</view>
		</checkbox-group>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: null,
				keyword: null,
				checkbox: [{
						value: 'A',
						checked: true
					}, {
						value: 'B',
						checked: true
					}, {
						value: 'C',
						checked: false
					}],
				userInfo: {
					name: 'uView UI',
					sex: '',
					
				}

			};
		},
		onLoad() {
			uni.removeStorageSync("token")
			uni.removeStorageSync("YNF_INFO")
		},
		methods: {
			go(e) {
				uni.navigateTo({
					url: e
				})
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			
			
			async login() {
				if (!this.username) {
					uni.showToast({
						title: '请输入账户名',
						icon: 'none',
						mask: true,
						success: (res)=> {
							
						}
					});
					return
				}
				if (!this.keyword) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						mask: true,
						success: (res)=> {
							
						}
					});
					return
				}
				if (this.checkbox[0].checked != true) {
					uni.showToast({
						title: '请先阅读协议',
						icon: "error",
					 duration: 2000
					});
					return
					}
				const params = {
					type:'agent',
					account: this.username,
					password: this.keyword
				}
				const res = await this.$API({
					url: '/api/user/login',
					method: 'POST',
					data: params
				})
				if (res.code === 1) {
					uni.setStorageSync('token', res.data.userinfo.token);
					this.setStorage(res.data.userinfo)
					uni.showToast({
						title: res.msg,
						duration: 2000,
						success: (res) => {
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 1500)
						}
					});
				}
			},
			setStorage(e) {
				let info = {
					avatar: e.avatar,
					username: e.username,
					mobile: e.mobile,
					score: e.score,
					user_id: e.user_id,
					merchant_id: e.merchant_id
				}
				uni.setStorageSync('YNF_INFO', info);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
	.bottom-c {
		width: 100%;
		text-align: center;
		position: fixed;
		bottom: 20upx;
	
	}
	
	.u-iconfont {
		position: relative;
		display: flex;
		font: normal normal normal 14px/1 "uicon-iconfont";
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.uicon-account:before {
		content: "\e628";
	}
	.u-iconfont:before {
	    display: flex;
	    align-items: center;
	}
	.LoginIcon {
		font-size: 24px;
		color: #3c9cff;
		margin-right:20rpx;
	}
	.LoginIconLock:before {
		content: "\e97a";
	}
</style>
